<template>
	<div class="setinfo">
		<header-com title="裁判申请" moduleName="match"></header-com>
		<van-cell-group>
			<van-cell title="姓名" class='cell' required>
				<template slot="">
					<van-field class="input" v-model="get_user.name" clearable input-align="right" disabled />
				</template>
			</van-cell>
			<van-cell title="证件类型" class='cell' required>
				<template slot="">
					<span class="disabled" v-if="get_user.card_type == 0">身份证</span>
					<span class="disabled" v-if="get_user.card_type == 1">护照</span>
				</template>
			</van-cell>
			<van-cell title="证件号码" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model="get_user.id_card" maxlength="11" clearable input-align="right" disabled />
				</template>
			</van-cell>
			<van-cell title="联系方式" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model="get_user.phone" clearable input-align="right" disabled />
				</template>
			</van-cell>
			<van-cell title="邮箱" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model.trim="user.email" placeholder="请输入" input-align="right" clearable />
				</template>
			</van-cell>
			<van-cell title="裁判级别" class='cell' is-link @click="show1 = true" required>
				<template slot="">
					<span v-if="user.ref_grade == 0">国际级</span>
					<span v-if="user.ref_grade == 1">国家级</span>
					<span v-if="user.ref_grade == 2">一级</span>
					<span v-if="user.ref_grade == 3">二级</span>
					<span v-if="user.ref_grade == 4">三级</span>
				</template>
			</van-cell>
			<van-cell title="学历" class='cell' is-link @click="show2 = true" required>
				<template slot="">
					<span v-if="user.education == 0">专科</span>
					<span v-if="user.education == 1">本科</span>
					<span v-if="user.education == 2">硕士</span>
					<span v-if="user.education == 3">博士</span>
				</template>
			</van-cell>
			<van-cell title="所在省市" is-link class='cell' @click="showAreaSelect=true" required>
				<template slot="">
					<span>{{user.province}}</span>
				</template>
			</van-cell>
			<van-cell title="民族" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model="user.nation" placeholder="请输入" input-align="right" />
				</template>
			</van-cell>
			<van-cell title="工作单位" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model="user.address" placeholder="请输入" input-align="right" />
				</template>
			</van-cell>
			<van-cell title="资质证明" class='cell' required>
				<template slot="">
					<div class="logo">
						<img :src="user.prove" input-align="right">
						<input type="file" name="" v-on:change="change($event)" class="upload">
					</div>
					<!-- <van-field class="short-input" v-model="user.prove" placeholder="请输入" input-align="right" /> -->
				</template>
			</van-cell>
			<van-cell title="驳回理由" class='cell' v-if="status==2" required>
				<template slot="">
					<van-field class="short-input" v-model="user.rejected" input-align="right" disabled />
				</template>
			</van-cell>
		</van-cell-group>
		<div class="conform" :class="{'color':status===0}" @click="submit">
			<span v-if="status === 1">已通过</span>
			<span v-if="status === 2">提交</span>
			<span v-if="status === 0">审核中</span>
		</div>
		<van-actionsheet v-model="show" :actions="actions" @select="onSelect" />
		<van-actionsheet v-model="show1" :actions="actions1" @select="onSelect1" />
		<van-actionsheet v-model="show2" :actions="actions2" @select="onSelect2" />
		<van-popup v-model="showAreaSelect" position="bottom">
			<van-area :area-list="areaList" @confirm='areaChange' @cancel='hideAreaSelect' />
		</van-popup>
	</div>
</template>
<script>
	import {
		Uploader
	} from 'vant';
	import {
		Actionsheet
	} from 'vant';
	import {
		DatetimePicker
	} from 'vant';
	import {
		Toast
	} from 'vant';
	import areaList from 'vant/packages/area/demo/area.js'
	export default {
		data() {
			return {
				get_user: {
					name: "",
					card_type: "",
					id_card: "",
					phone: "",
				},
				user: {
					ref_grade: 2,
					education: 1,
					province: "",
					nation: "",
					email: "",
					address: "",
					prove: require('@/assets/img/defult.png'),
					rejected: ''
				},
				status: '',
				check: false,
				show: false,
				show1: false,
				show2: false,
				showAreaSelect: false,
				areaList,
				actions: [{
						name: '身份证',
						type: 0
					},
					{
						name: '护照',
						type: 1
					},
				],
				actions1: [{
						name: '国际级',
						type: 0
					},
					{
						name: '国家级',
						type: 1
					},
					{
						name: '一级',
						type: 2
					},
					{
						name: '二级',
						type: 3
					},
					{
						name: '三级',
						type: 4
					},
				],
				actions2: [{
						name: '专科',
						type: 0
					},
					{
						name: '本科',
						type: 1
					},
					{
						name: '硕士',
						type: 2
					},
					{
						name: '博士',
						type: 3
					},
				],
			}
		},
		mounted() {
			this.getUserInfo();
			this.com_setInfo();
		},
		methods: {
			getUserInfo(){
				this.$axios.get('mobile/v1/PersonalCenter/my_info', {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}).then(res => {
						if (res.data.code == 2000) {
							this.get_user = res.data.data.user_info
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					})
			},
			com_setInfo() {
				this.$axios.get('mobile/v1/UserApply/getRefereeInfo', {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}).then(res => {
						if (res.data.code == 200 || res.data.code == 400) {
							if (res.data.data != '') {
								this.status = res.data.data.status
								if(res.data.data.status == 1){
									Toast('您已通过审核');
								}
								if(res.data.data.status == 2){
									Toast('您的提交被驳回！');
								}
								this.user = res.data.data
							} 
							else {
								this.status = 2
							}
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					})
			},
			checked() {
				let flag = true
				if (!(/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/.test(this.user.email))) {
					Toast('Email格式不正确！');
					return false;
				}
				if (this.user.prove.trim() == '' || this.user.prove.trim() == undefined || this.user.prove.trim() == null) {
					Toast('请上传资质证明！');
					return false;
				}
				return flag
			},
			onSelect(item) {
				this.show = false;
				this.user.card_type = item.type;
				console.log(item)
			},
			onSelect1(item) {
				this.show1 = false;
				this.user.ref_grade = item.type;
				console.log(this.user.ref_grade)
			},
			onSelect2(item) {
				this.show2 = false;
				this.user.education = item.type;
				console.log(this.user.education)
			},
			areaChange(value) {
				console.log(value)
				this.showAreaSelect = false;
				this.user.province = `${value[0].name} ${value[1].name} ${value[2].name}`
			},
			hideAreaSelect() {
				this.showAreaSelect = false;
			},
			change(e) {
				let img = e.target.files[0];
				let form = new FormData();
				form.append('file', img, img.name);
				this.$axios.post('/mobile/v1/event/img', form)
					.then(res => {
						if (res.data.code == 200) {
							this.user.prove = res.data.data
							Toast('上传成功')
						} else {
							Toast(res.data.msg)
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					})
			},
			submit() {
				console.log(this.status)
				if (this.status == 2 || this.status == '') {
					// this.checked();
					// if (this.check) {
					if (this.checked()) {
						var params = new URLSearchParams();
						// params.append('name', this.user.name);
						// params.append('card_type', this.user.card_type);
						// params.append('number', this.user.number);
						// params.append('phone', this.user.phone);
						params.append('ref_grade', this.user.ref_grade);
						params.append('education', this.user.education);
						params.append('province', this.user.province);
						params.append('nation', this.user.nation);
						params.append('email', this.user.email);
						params.append('address', this.user.address);
						params.append('prove', this.user.prove);
						this.$axios.post('/mobile/v1/UserApply/doUserToReferee', params, {
								headers: {
									token: window.sessionStorage.getItem('token')
								}
							})
							.then(res => {
								if (res.data.status == 200) {
									this.status = 0;
									this.$router.push({path:'/mine'})
									Toast(res.data.message)
								} else {
									Toast(res.data.message)
								}
							})
							.catch(res => {
								//  console.log(res.msg);
							})
					}
				}
				if (this.status === 0) {
					Toast('审核中')
				}
			},
		},
	}
</script>
<style lang="less" scoped>
	.disabled {
		opacity: 1;
		color: #7d7e80;
		background-color: transparent;
	}

	.logo {
		img {
			display: inline-block;
			height: 100%;
			max-width: 1rem;
			position: absolute;
			top: 0;
			right: 0;
			border: none;
		}
	}

	.upload {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1000;
		opacity: 0;
		height: 100%;
		width: 1rem;
		border: none;
	}

	.van-icon {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 18px;
		color: #fff;
		height: 0.6rem;
		width: 0.6rem;
		border-radius: 50%;
		background: #42B574;
		line-height: 0.6rem;
	}

	.img_url {
		display: inline-block;
		height: 1.4rem;
		width: 1.4rem;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		border: none;
	}

	.van-uploader {
		height: 1.4rem;
		width: 1.4rem;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.van-uploader__input {
		border-radius: 50%;
		border: none;
		background: transparent;
	}

	.conform {
		/*// font-size: 0.4rem;*/
		font-weight: 700;
		width: 50%;
		margin: 0 auto;
		background: #42B572;
		color: #fff;
		margin-top: 0.4rem;
		padding: 0.2rem 0;
	}

	.color {
		background: #a5ada8;
	}

	.setinfo {
		margin-bottom: 1.1rem;
		padding-bottom: 1.1rem;
	}

	.pic-box {
		display: flex;
		justify-content: center;
		padding: 0.3rem 0.5rem;

		.pic {
			height: 1.4rem;
			width: 1.4rem;
			border: 0.04rem solid #42B574;
			border-radius: 50%;
			position: relative;

			input {
				border: none;
			}
		}
	}

	.cell {
		background-color: #f6f6f6;
		text-align: left;
	}

	.input {
		background: #f6f6f6;
		padding: 0;
		float: right;
		width: 2rem;
	}

	.short-input {
		background: #f6f6f6;
		padding: 0;
		float: right;
		/*width: 1rem;*/
	}

	.long-input {
		background: #f6f6f6;
		padding: 0;
		float: right;
		width: 3rem;
	}
</style>
